<template>
	<view>
		<image src="/static/imgs/headbg.png" mode="widthFix" class="top-bg"></image>
		<view class="info">
			<image src="/static/common/head_img.png" mode="scaleToFill" class="user-img"></image>
			<view style="font-size: 34rpx;margin-top: 10rpx">{{ userInfo.phone }}</view>
		</view>
		<view class="ll">
			<view>当前版本</view>
			<view>1.0.0</view>
		</view>
		<view class="ll" @click="logOut">
			<view>退出登录</view>
			<image src="/static/common/fn_icon2.png" mode="asFill" class="tc"></image>
		</view>
		<tui-tabbar :tabBar="tabBar" :current="current" @click="tabbarSwitch" color="#9B9B9B" selectedColor="#3291F8"
			iconSize="48">
		</tui-tabbar>
	</view>
</template>

<script>
import {
	mapMutations,
	mapGetters,
	mapState
} from 'vuex'
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar"
import indexConfig from "@/config/index.config.js"
export default {
	components: {
		uniNavBar
	},
	data() {
		return {
			current: 2,
			total: 0, //外出申请次数
			serverUrl: indexConfig.baseUrl + "api/punch/uploadPic",
		};
	},
	onShow() {
	},
	onLoad() {

	},
	computed: {
		...mapGetters(['tabBar']),
		...mapState(['userInfo', 'imagePath'])
	},
	methods: {
		...mapMutations(['SET_LOGOUT', 'SET_USERINFO']),
		// 选择背景图片

		tabbarSwitch(e) {
            if (e.index == 2) return
            if (e.index == 1) {
                uni.switchTab({ url: '/pages/threeTerminal/taskTabba' })
                // this.$Router.switchTab('tabBar-dataDisplay');
            } else if (e.index == 0) {
                uni.switchTab({ url: '/pages/threeTerminal/index' })
            }
        },
		// 退出登录
		logOut() {
			uni.showModal({
				title: '退出',
				content: '是否确认退出登录？',
				confirmColor: "#3291F8",
				success: (res) => {
					if (res.confirm) {
						setTimeout(() => {
							this.SET_LOGOUT();
						}, 1000)
						this.$Router.reLaunch('login');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});

		},
	}
}
</script>

<style lang="scss">
page {
	background: #F4F8FB;
}
.ll {
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 120rpx;
	padding: 0 40rpx;
	margin: 40rpx;
	border-radius: 10rpx;
	box-shadow: 1px 1px 2px #999;
	view {
		font-size: 30rpx;
		color: #333;
	}
}
.tc {
	width: 50rpx;
	height: 50rpx;
}

.top-bg {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}
.info {
	width: 100%;
	margin-top: 200rpx;
	text-align: center;
}
.user-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	// box-shadow: 1px 1px 1px #999;
	overflow: hidden;
	margin: auto;
}
</style>